<template>
	<div class="fixed" :class="{'fixed-shadow': suspension}">
		<div class="main-header">
			<div class="main-header-width">
				<span><router-link tag="a" :to="{name: 'Home'}">欢迎来到农特选货商城</router-link></span>
				<ul class="main-top-info">
					<li>
						<router-link tag="a" :to="{name: 'Center'}">{{account}}</router-link>
					</li>
					<li><router-link tag="a" :to="{name: 'Order'}"><i class="header-order-icon"></i>订单</router-link></li>
					<li>
						<router-link tag="a" :to="{name: 'Wallet'}"><i class="header-order-icon header-wallet-icon"></i>我的钱包</router-link>
					</li>
					<li style="border: 0;">
						<router-link tag="a" :to="{name: 'Document'}"><i class="header-order-icon header-document-icon"></i>功能文档</router-link>
					</li>
				</ul>
			</div>
		</div>
		<div class="main-isbill" v-if="$route.path == '/index/home' || $route.path == '/index/category'">
			查看页面价格 <el-switch class="float-right" v-model="isBill" :width="74" on-text="含税" off-text="不含税" on-color="#ffa726" off-color="#91d446" @change="changeIsBill"></el-switch>
		</div>
		<div class="main-search">
			<div class="main-search-logo">
				<router-link tag="a" :to="{name: 'Home'}"></router-link>
			</div>
			<div class="main-search-content">
				<ul class="main-search-type">
					<li v-for="(item,index) in tab" @click="searchType" :data-id="index" :class="{'select': item.isShow}">{{item.tabtext}}</li>	
				</ul>
				<div class="main-search-input">
					<div v-if="tab[0].isShow">
						<input type="text" placeholder="输入商品名称或者商品编码" v-model="keyword" />
					</div>
					<div v-else-if="tab[1].isShow">
						<input type="text" placeholder="输入品牌名称" v-model="keyword" />
					</div>
					<div v-else>
						<input type="text" placeholder="输入三级类目" v-model="keyword" />
					</div>
					<router-link tag="div" class="main-search-btn" :to="{name: 'Category', query: { levelOne: '', levelTwo: '', levelThree: '', keyWord: keyword, selectType: selectType, brandId: '' }}">搜 索</router-link>
				</div>
				<div class="hot-search">
					<ul v-show="tab[0].isShow" >
						<li v-for="item in hotGoodsWord"><router-link tag="a" :to="{name: 'Category', query: { levelOne: '', levelTwo: '', levelThree: '', keyWord: item, selectType: '1', brandId: '' }}">{{item}}</router-link></li>
					</ul>
					<ul v-show="tab[1].isShow">
						<li v-for="item in hotBrandWord"><router-link tag="a" :to="{name: 'Category', query: { levelOne: '', levelTwo: '', levelThree: '', keyWord: item, selectType: '1', brandId: '' }}">{{item}}</router-link></li>
					</ul>
				</div>
			</div>
			<div class="main-spp-car">
				<router-link tag="div" class="main-spp-car-shape" :to="{name: 'Shelves'}">
					<i class="main-car-icon"></i>
					我的货架
					<span v-bind:class="{'display-none': goodsCountShow}">{{goodsCount}}</span>
				</router-link>
			</div>
		</div>
	</div>
</template>
<script>
	import {mapActions, mapState} from 'vuex'

	export default{
		data(){
			return {
				tab:[
    				{
    					tabtext: '商品',
    					isShow: true,
    					id: 1
    				},
    				{
    					tabtext: '品牌',
    					isShow: false,
    					id: 2
    				},
    				{
    					tabtext: '类目',
    					isShow: false,
    					id: 3
    				}
    			], //搜索条件   			
	    		keyword: '', // 关键字
	    		selectType: 1,// 搜索类型
	    		suspension: false,
	    		isBill: this.$store.state.isBill	
	    	}  		
		},
		computed: {
			...mapState([
                'hotGoodsWord',
                'hotBrandWord',
                'goodsCount',
                'goodsCountShow',
                'account'
            ]),
		},
		watch: {
          // 如果路由有变化，会再次执行该方法
         	"$route": "routeChange"
        },
        created(){
        	this.keyword = this.$route.query.keyWord;
        },
		mounted(){
			this.setHotGoodsWord();
			this.setHotBrandWord();
			this.setGoodsCount();
			window.addEventListener('scroll', this.handleScroll);
		},
		methods: {
			...mapActions(['setHotGoodsWord', 'setHotBrandWord', 'setGoodsCount']),
			searchType: function(event){
	    		var tab = this.tab;
	    		var id = event.target.dataset.id;
	    		for(var i in tab){	    			
	    			if(i == id){
	    				tab[i].isShow = true;
	    				this.selectType = tab[i].id;
	    			}else{
	    				tab[i].isShow = false;
	    			}
	    		}
		    },
		    handleScroll: function(){
		    	var h = document.documentElement.scrollTop || document.body.scrollTop;
		    	if(h > 0){
	    			this.suspension = true;
	    		}else{
	    			this.suspension = false;
	    		}
		    },
		    hotSetInput(str){
		    	this.keyword = str;
		    },
		    routeChange(){
				this.keyword = this.$route.query.keyWord;
			},
			changeIsBill() { // 查看页面价格是否含税
				if(this.isBill){
		          this.$store.dispatch('changeIsBill',1);
		        }else{
		          this.$store.dispatch('changeIsBill',0);
		        }
			}
		}
	}
</script>